<template>
    <el-card shadow="hover" class="layout-padding-auto" >
    <div style="text-align: center;"  class="divcontainer">
        <div class="divcontainer_sub1">
            <span>
                产线:
                <el-select v-model="selectedMessage.LineCode" placeholder="请选择产线">
                    <el-option v-for="line in stateInfo.AllLines" :key="line.Text" :value="line.Text" :label="line.Text"></el-option>
                </el-select>                                      
            </span>
        </div>
    
        <div class="divcontainer_sub1">
            <span>
                工位:
                <el-select v-model="selectedMessage.StationCode" placeholder="请选择工站">
                    <el-option v-for="station in stateInfo.AllStations" :key="station.StationCode" :value="station.StationCode" :label="station.StationCode"></el-option>
                </el-select>
            </span>
        </div>
        </div><br>
    <div ref="controlChart1" style="width: 90%; height: 500px;"></div>
</el-card>
  </template>
  
  <script setup lang="ts" name="能耗管理">
  import { ref, onMounted, reactive, watch, computed } from 'vue';
  import * as echarts from 'echarts'; 
  import other from '/@/utils/other';
  import request from '/@/utils/request';

//图表显示数据
const chartInfo = reactive({
  xData:[] as any[],
  yData:[] as any[],
 
})


  // 产线、工位选择信息
    interface SelectedMessage {  
    StationCode: null | string; 
    LineCode: null | string;  
    }  
  const selectedMessage = ref<SelectedMessage>({  
    StationCode: null,  
    LineCode: null,  
    });

    const flagValue = ref<number>(0);

const stateInfo = reactive({
    //产线信息
    AllLines: [] as any[],
    //工位信息
    AllStations: [] as any[],
})
  const controlChart1 = ref(null);
  const chart1 = ref(null)

  const ClearLineData = ()=> {

    if (chart1.value != null && chart1.value.dispose) { 
        console.log('卸载曲线图1') 
        chart1.value.dispose();  
        chart1.value = null;  
    }  
}

//调用接口显示图表信息
const flushUI = (lineCode: string | null, stationCode: string | null) => {
        if(lineCode != null && stationCode != null && lineCode != '' && stationCode != '') {

            request({
                url: '/api/EnergyConsumptionRecord/GetEnergyUIInfo',
                method: 'post',
                data: {
                    'lineCode': selectedMessage.value.LineCode,
                    'stationCode': selectedMessage.value.StationCode
                }}).then(res=>{
                    
                        chartInfo.xData=res.TimeRecent;  //x轴信息
                        chartInfo.yData=res.energyConsumption;   //y轴信息
                        
                        initChart(chart1,controlChart1,chartInfo.xData,chartInfo.yData,res.min,res.max);
                })

        } 
}



  //显示图表方法
  const initChart = (myChart: any,chartRef:any,xdata:any,ydata:any,enmin:number,enmax:number) => {
    myChart.value = echarts.init(chartRef.value);
    // 配置图表的选项（options）
    const option = {
      title: {
        text: '能耗数据柱形图',
        left:'center'
      },
      grid:{
            containLabel:false,
            bottom:'10%',
            top:'20%'
      },
      tooltip: {},
      xAxis: {
        data: xdata // 这里填入你的x轴数据
      },
      yAxis: {
        name:'能耗',
        min:enmin,
        axisLine:{
            show:'true',
            lineStyle:{
                color:'black',
                type:'solid'
            }
        }
      },
      series: [
        {
        //name: '能耗',
        type: 'pictorialBar',
        symbolPosition:'start',
        symbol:'diamond',
        symbolOffset:[0,'50%'],
        symbolSize:[30,15],
        barWidth:30,
        itemStyle:{
          color:'#02D7EA'
        },
        // label:{
        //     show:true,
        //     position:'top'
        // },
        z:3,
        data:  ydata // 这里填入你的y轴数据
      },
      {
        name: '能耗',
        type: 'bar',
        color:'#057DFE',
        barWidth:30,
        label:{
            show:true,
            position:'top'
        },
        itemStyle:{
          color:{
            type:'linear',
            x:0,
            y:0,
            x2:0,
            y2:1,
            global:false,
            colorStops:[
                {offset:0,color:'#057DFE'},
                {offset:1,color:'#02D7EA'}

            ]

          }      
        },
        data:  ydata // 这里填入你的y轴数据
      },
      {
        //name: '能耗',
        type: 'pictorialBar',
        symbolPosition:'end',
        symbol:'diamond',
        symbolOffset:[0,'-50%'],
        symbolSize:[30,15],
        barWidth:30,
        // label:{
        //     show:true,
        //     position:'top'
        // },
        itemStyle:{
          color:{
            type:'linear',
            x:0,
            y:0,
            x2:0,
            y2:1,
            global:false,
            colorStops:[
                {offset:0,color:'#057DFE'},
                {offset:1,color:'#02D7EA'}

            ]

          }      
        },
        z:3,
        data: ydata // 这里填入你的y轴数据
      }
    ]
    };
    
    // 使用刚指定的配置项和数据显示图表。
    myChart.value.setOption(option);
  };

watch(() => selectedMessage.value.LineCode, (newValue, oldValue) => {

request({
    url: '/api/BaseInformation/Station/GetStationsByLine',
    method: 'post',
    data: {
        'LineCode':selectedMessage.value.LineCode
    }
}).then(res => {
    stateInfo.AllStations = res.Stations.map((x: any) => x);
})

// 保存历史产线选择信息
if(selectedMessage.value.LineCode != null){
    localStorage.setItem('selectedLineHistory',selectedMessage.value.LineCode)
}

if(flagValue.value == 1){  // 是读取历史数据
    const StationStorage = localStorage.getItem('selectedStationHistory'); //读取历史工位选择
    if(StationStorage){
        selectedMessage.value.StationCode = StationStorage;
    }
    // 清空标志位
    flagValue.value = 0;
}else{
    selectedMessage.value.StationCode = ''
}
}
)


watch(() => selectedMessage.value.StationCode, (newValue, oldValue) => {

    if(selectedMessage.value.StationCode != null){
        localStorage.setItem('selectedStationHistory', selectedMessage.value.StationCode)
    }
// 刷新界面信息
    if(selectedMessage.value.StationCode == null  || selectedMessage.value.StationCode == '') {
        ClearLineData()
    }
    else{
    ClearLineData()
        //getLineData('1', '1', 1, 1)
        flushUI(selectedMessage.value.LineCode, selectedMessage.value.StationCode)
        }

})

  
  onMounted(() => {
    other.getSelectList('/api/BaseInformation/Station/GetLines',[],false).then(x=>{stateInfo.AllLines = x});  
    
    const lineStorage = localStorage.getItem('selectedLineHistory');
    if(lineStorage)
    {
        selectedMessage.value.LineCode = lineStorage;
        flagValue.value = 1;
    }
  });
  </script>
  <style scoped lang="scss">  
  .divcontainer {  //.divcontainer1
      display: flex;  
      align-items: center;
      //justify-content: space-between, left; /* 在元素之间添加等量的空间 */ 
      margin-right: 50px; 
  }  
  .divcontainer_sub1 {  //.divcontainer11
      display: flex;  
      align-items: center;
      //justify-content: space-between, left; /* 在元素之间添加等量的空间 */ 
      margin-right: 100px; 
  } 
  
  .el-table .cell {  
    border: 1px solid black !important; /* 示例边框颜色和宽度，根据需要调整 */  
  }  
  </style>